<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>点单</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
				color: #333333;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
				font-size: 12px;
				text-align: center;
				height: 62px;
				padding-top: 10px;
				border-bottom: 1px solid #DDDDDD;
				cursor: pointer;
			}
			li img{
				width: 30px;
				height: 30px;
			}
			.le{
				border-left: 3px solid #DBA817;
				background-color: rgb(255 240 243);
			}
			::-webkit-scrollbar
			{
				width: 2px;
				height: 16px;
				background-color: #F5F5F5;
			}
			/*设置滚动条*/
			.marginleft{
				margin-left: 5px;
			}
			.spanb{
				display: inline-block;
				padding: 1px 5px;
				background-color: #ebf7d9;
			}
			.lab{
				color: #DBA897;
			}
		</style>
		<script type="text/javascript">
		function GetLinkPage(obj,n)
		{
			var items=document.getElementById("ultype").getElementsByTagName("li");

			for	(var i=0;i<items.length;i++){
				if(i==n)
				{
					document.getElementById("li"+n).classList.add("le");
				}
				else
				{
					document.getElementById("li"+i).classList.remove("le");
				}
			}
		}
		function CloseSelect()
		{
			document.getElementById("selectarea").style.display="none";
			
		}
		function ShowSelectArea()
		{
			document.getElementById("selectarea").style.display="";
		}
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 380px;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
					
				<div style="height: 50px;width: 380px;background-color: white;display: flex;justify-content: space-between;align-items: center;">
					<div style="margin-left: 20px;border-radius: 25px;background-color: #f2f2f2;height: 33px;">
						<input type="text" style="width: 220px;font-size: 13px;border-radius: 25px;border: 0;background-color: #f2f2f2;padding-left: 10px;height: 33px;" placeholder="搜索文字">
					</div>
				</div>
				<div style="background-color: white;display: flex;justify-content: space-between;align-items: center;">
					<div style="padding-left: 20px;margin-bottom: 10px;padding-top: 15px;">
						<p>
							<div style="display: inline-block;">☆</div>
							<div style=" display: inline-block; background-color: rgb(255 240 243);">美年广场GO店</div> 
							<div style="display: inline-block;">></div>
						</p>
						<p style="color: #C3C3C3;font-size:12px ;margin-top: 3px;">距离您15.4km</p>
					</div>
					<div style="margin-bottom: 10px;background-color: rgb(255 240 243);color:#959595;;font-size: 12px;border-radius: 25px;width: 90px;text-align: center;line-height: 2;margin-right: 15px;cursor: default;">
						<div style="display: inline-block;width: 43px;background-color: black;color: white;border-top-left-radius: 25px;border-bottom-left-radius: 25px;height: 26px;">自取</div>
						<div style="display: inline-block;width: 43px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;height: 26px;">外卖</div>
					</div>
				</div>
				<div style="display: flex;justify-content: space-between;">
					<div style="width: 80px;height: calc(100vh - 260px);overflow: scroll;overflow-x: hidden; "><!--固定住显示框-->
						<ul id="ultype">
							<li class="le" onclick="GetLinkPage(this,0)" id="li0">
								<a href="#xichashiyanshi">
									<img src="image/icon/shiyanshi.png" >
									<p>喜茶实验室</p>
								</a>
							</li>
							<li onclick="GetLinkPage(this,1)" id="li1">
								<a href="#dangjixianding">
									<img src="image/icon/dangjixianding.png" >
									<p>当季限定</p>
								</a>
							</li>
							<li onclick="GetLinkPage(this,2)" id="li2">
								<a href="#renqibihebang">
									<img src="image/icon/renqibihe.png" >
									<p>人气必喝榜</p>
								</a>
							</li>
							<li onclick="GetLinkPage(this,3)" id="li3">
								<a href="#xichazhibing">
									<img src="image/icon/xichazhibing.png" >
									<p>喜茶制冰</p>
								</a>
							</li>
							<li onclick="GetLinkPage(this,4)" id="li4">
								<img src="image/icon/reyintuijian.png" >
								<p>热饮推荐</p>
							</li>
							<li onclick="GetLinkPage(this,5)" id="li5">
								<img src="image/icon/guochajiazu.png" >
								<p>果茶家族</p>
							</li>
							<li onclick="GetLinkPage(this,6)" id="li6">
								<img src="image/icon/mingcharucha.png" >
								<p>茗茶/乳茶</p>
							</li>
							<li onclick="GetLinkPage(this,7)" id="li7">
								<img src="image/icon/bobojiazu.png" >
								<p>波波家族</p>
							</li>
							<li onclick="GetLinkPage(this,8)" id="li8">
								<img src="image/icon/chuncha.png" >
								<p>纯茶</p>
							</li>
							<li onclick="GetLinkPage(this,9)" id="li9">
								<img src="image/icon/jialiao.png" >
								<p>加料</p>
							</li>
							<li onclick="GetLinkPage(this,10)" id="li10">
								<img src="image/icon/gongtongkangyi.png" >
								<p>共同抗议</p>
							</li>
							<li onclick="GetLinkPage(this,11)" id="li11">
								<img src="image/icon/linggantishi.png" >
								<p>灵感提示</p>
							</li>
						</ul>
					</div><!--左边栏-->
					<div style="width: 300px;padding: 5px;background-color: white;height: calc(100vh - 260px);overflow: scroll;overflow-x: hidden;">
						<img src="image/daodan.png" style="width: 100%;" >
						<img src="image/dongriyiyin.png" style="width: 100%;">
						<div style="margin-top: 20px;" id="xichashiyanshi">
							<p style="color: #777777;font-size: 12px;">喜茶实验室</p>
							<div style="display: flex;margin: 10px 5px;background-color: rgb(255 240 243);">
								<img src="image/icon/mangmangganlubingbang.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>芒芒甘露冰棒</p>
									<p style="font-size: 12px;margin-top: 5px;margin-bottom: 5px;"><span class="marginleft spanb" style="color: #70b309;">新品</span><span class="marginleft spanb" style="color: #777777;background-color: #DDDDDD;">含乳制品</span></p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;cursor: pointer;" onclick="ShowSelectArea()">人气多肉芒芒甘露变身冰棒。爽口芒芒冰壳中夹有爱文芒果果肉与酸甜</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥18</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;cursor: pointer;" onclick="ShowSelectArea()"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/huotuidankesongcuibao.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>火腿蛋可颂脆堡</p>
									<p style="font-size: 12px;margin-top: 5px;margin-bottom: 5px;">
										<span class="marginleft spanb" style="color: #777777;background-color: #DDDDDD;">含小麦、燕麦、蛋</span>
										<span class="marginleft spanb" style="color: #777777;background-color: #DDDDDD;">乳及大豆制品</span></p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">可颂面包夹入大块烟熏火腿与原味蛋饼，车打芝士更添浓郁奶香</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥19</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/jiaxinxiaofang.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>夹心小方</p>
									<p style="font-size: 12px;margin-top: 5px;margin-bottom: 5px;">
										<span class="marginleft spanb" style="color: #777777;background-color: #DDDDDD;">含乳制品</span></p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">10片/盒，每片均为独立小包装，芝士味、咸蛋黄味2款可选。精选美...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥45</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/NFCmangmangzhi.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>NFC芒芒汁</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">非浓缩还原，0脂肪，0添加剂，纯粹鲜榨，不加一滴水。大颗芒果鲜榨...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥19</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
						</div>
						<div style="margin-top: 20px;" id="dangjixianding">
							<p style="color: #777777;font-size: 12px;">当季限定</p>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/mangmangganluyeyedong.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>芒芒甘露椰椰冻</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷500ml椰椰冰淇淋打顶，优质生椰乳与芒芒冰沙轻轻滑过舌尖，再加...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥29</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/shengdayeyenaidong.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>生打椰椰奶冻</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷/热500ml。仅选用优质生椰乳，保留椰子原始风味。椰香浓厚，质...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥25</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/shengdayeyemang.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>生打椰椰芒</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷/热500ml。仅选用优质生椰乳，保留椰子原始风味。椰香浓厚，质...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥25</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
						</div>
						<div style="margin-top: 20px;" id="renqibihebang">
							<p style="color: #777777;font-size: 12px;">人气必喝榜</p>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/duorouputao.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>多肉葡萄</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷670ml热500ml人气Top1当季巨峰葡萄回归，颗颗剁手，保留果肉...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥29</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/duoroumangmangganlu.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>多肉芒芒甘露</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷/热标准杯500ml冷加大MAX杯670ml人气Top2经典芒芒与杨枝甘露...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥27</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/zhizhimeimei.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>芝芝梅梅</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">冷670ml热500ml人气Top3选用定制草莓搭配绿妍茶底新鲜现打，莓...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥32</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
						</div>
						<div style="margin-top: 20px;" id="xichazhibing">
							<p style="color: #777777;font-size: 12px;">喜茶制冰</p>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/yeyecuitong.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>椰椰脆筒</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">由于冰淇淋易化，下单后需要到冰淇淋机出示购买凭证制作领取，敬请谅解...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥9</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/zhizhicuitong.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>芝芝脆筒</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">由于冰淇淋易化，下单后需要到冰淇淋机出示购买凭证制作领取，敬请谅解...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥9</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
							<div style="display: flex;margin: 10px 5px;">
								<img src="image/icon/yeyedongxuegaobei.png" style="width: 60px;height: 60px;">
								<div style="font-size: 14px;">
									<p>椰椰冻雪糕杯</p>
									<p style="font-size: 12px;color:#777777;margin-bottom: 10px;">由于冰淇淋易化，下单后需要到冰淇淋机出示购买凭证制作领取，敬请谅解...</p>
									<div style="display: flex;justify-content: space-between;">
										<p>￥13</p>
										<div style="background-color: #be7020; border-radius: 50%;  width: 20px; height:20px; text-align: center;"> +</div>
									</div>
								</div>
							</div>
						</div>
						<div style="height: 40px;width: 100%;"></div>
					</div><!--右边菜栏-->
				</div><!--中间大框-->

				<div style="width: 380px; height: 50px;background-color: white;margin-top: 10px;position: absolute;    bottom: 0;overflow: hidden;display: flex;justify-content: space-between;align-items: center;">
					<div>
						<div style="border: 1px solid #bebdbd;;border-radius: 50px;width: 40px;height: 40px;display: inline-block;margin-left: 13px;">
							<div style="font-size: 10px;margin-left: 5px;display: inline-block;margin-top: 4px;color: #C3C3C3;">total</div>
							<div style="width: 15px;height: 15px;display: inline-block;background-color: #dba817;font-size: 12px;text-align: center;border-radius: 25px;position: absolute;color: white;">1</div>
						</div>
						<div style="display: inline-block;">￥18</div>
					</div>
					<div style="height: 50px;width: 100px;text-align: center;color: white;background-color: rgb(222 160 112);line-height: 3;">
						<a href="dingdanjiesuan.html" style="color: white;">
							结算
						</a>
					</div>
				</div><!--底部结算栏-->
				
				<div style="position: fixed;width: 380px;bottom: 50px;background-color: white;height: 50px;">
					<ul style="display: flex;justify-content: space-around;">
						<li style="width: 30px;text-align: center;padding-top: 5px;background-color: rgb(255 240 243);    height: 45px;">
							<a href="index.html">
								<i style="background-image: url(image/icon/shouye.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color: #908f8f;">首页</p>
							</a>
						</li>
						<li style="width: 30px;height: 45px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<i style="background-image: url(image/icon/diandan1.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
							<p style="font-size: 12px;color:#000000 ;">点单</p>
						</li>
						<li style="width: 30px;height: 45px;text-align: center;cursor: pointer;padding-top: 5px;">
							<a href="baihuo.html">
								<i style="background-image: url(image/icon/baihuo.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">百货</p>
							</a>
						</li>
						<li style="width: 30px;height: 45px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="MyOrder.html">
								<i style="background-image: url(image/icon/dingdan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">订单</p>
							</a>
						</li>
						<li style="width: 30px;height: 45px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="wode.html">
								<i style="background-image: url(image/icon/wode.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">我的</p>
							</a>
						</li>
					</ul>
				</div><!--底边菜单栏-->

				<div id="selectarea" style="background-color:rgba(0,0,0,.3);width: 380px;height: 100%;position: absolute;display: none;"><!--一开始先隐藏起来-->
					<div style="margin: 20px;background-color: white;position: absolute;top: 15%;border-radius: 5px;width: 335px;padding-left: 10px;">
						<div class="iconfont" style="position: absolute;right: 40px;top: 12px;font-size: 20px;background-color: rgb(255 240 243);cursor: pointer;color: #C3C3C3;">《</div>
						<div class="iconfont" style="position: absolute;right: 12px;top: 12px;font-size: 20px;background-color: rgb(255 240 243);cursor: pointer;color: #C3C3C3;" onclick="CloseSelect();">X</div>
						<img src="image/selectgoods.png" style="width: 173px;height: 173px;margin-top: 30px;margin-left: 75px;" >
						<p>芒芒甘露冰棒</p>
						<p style="font-size: 12px;margin-top: 5px;margin-bottom: 5px;">
							<span class=" spanb" style="color: #70b309;">新品</span>
							<span class="marginleft spanb" style="color: #777777;background-color: white;">含乳制品</span>
						</p>
						<p style="color: #777777;font-size: 12px;">产品描述</p>
						<p style="color: #777777;margin-top: 10px;font-size: 12px;">人气多肉芒芒甘露变身冰棒。爽口芒芒冰壳中夹有爱文芒果果肉与酸甜西柚果粒，搭配椰奶冰淇淋，更添丝滑口感。过敏原提醒：含乳制品，可能含花生、蛋、坚果、含麸质的谷物、大豆制品</p>
						<p style="height: 0.5px;margin-top: 5px;background-color: #ececec;"></p>
						<div style="display: flex;justify-content: space-between;align-items: center;height: 50px;">
							<div>￥18</div>
							<div style="display: flex;justify-content: space-evenly;align-items: center;width: 50px;">
								<div style="display: inline-block;">-</div>
								<div style="display: inline-block;">1</div>
								<div style="display: inline-block;">+</div>
							</div>
						</div>
						<div style="text-align: center;height: 50px;background-color: rgb(223 153 113);color: white;border-radius: 10px;line-height: 3;margin-bottom: 13px;margin-right: 10px;cursor: pointer;" onclick="CloseSelect();">
							加入购物袋
						</div>
					</div>
				</div><!--冰棒的详情界面，不知道怎么调到屏幕正中间-->
			</div>
			
		</div>
	</body>
</html>
